import React, { useEffect, useState } from 'react'
import MyNavbar from '../../components/MyNavbar'
import styles from './css/index.module.css'
import { SideBar, Tabs } from 'antd-mobile'
import request from '../../api/request'
import { useNavigate } from 'react-router-dom'

function Index() {

  // 科室列表
  const [Department, setDepartment] = useState([])
  // 科室id
  const [departmentId, setDepartmentId] = useState(7)
  // 症状
  const [symptoms, setSymptoms] = useState([])


  // 药品列表
  const [medicine, setMedicine] = useState([])
  // 药品类目
  const [medicineCategory, setMedicineCategory] = useState([])
  // 药品id
  const [drugsCategoryId, setDrugsCategoryId] = useState(1)
  // 第几页
  const [page, setPage] = useState(1)
  // 一页显示多少条数据
  const [count, setCount] = useState(20)
  
  const navigate=useNavigate()

  // 科室列表
  useEffect(() => {
    request.get('/share/knowledgeBase/v1/findDepartment').then((res) => {
      // console.log(res);
      setDepartment(res.data.result)
    })
  }, [])

  // 症状
  useEffect(() => {
    request.get('/share/knowledgeBase/v1/findDiseaseCategory', {
      params: {
        departmentId: departmentId
      }
    }).then((res) => {
      // console.log(res);
      setSymptoms(res.data.result)
    })
  }, [departmentId])

  // 药品列表
  useEffect(() => {
    request.get('/share/knowledgeBase/v1/findDrugsCategoryList').then((res) => {
      console.log(res);
      setMedicine(res.data.result)
    })
  }, [])

  // 药品
  useEffect(()=>{
    request.get('/share/knowledgeBase/v1/findDrugsKnowledgeList',{
    params:{
      drugsCategoryId:drugsCategoryId,
      page:page,
      count:count
    }
  }).then((res)=>{
    // console.log(res);
    setMedicineCategory(res.data.result)
  })
  },[drugsCategoryId,page,count])


  return (
    <div className={styles.box}>
      <MyNavbar />
      <Tabs activeLineMode={false}>
        <Tabs.Tab title='常见病症' key='fruits'>

          <div className={styles.container}>
            <div className={styles.side}>
              {/* 常见症状侧边栏 */}
              <SideBar activeKey={departmentId}  onChange={setDepartmentId}>
                {Department.map((item) => (
                  <SideBar.Item key={item.id} title={item.departmentName} />
                ))}
              </SideBar>
            </div>
            <div className={styles.main} style={{overflow:'scroll'}}>
              <div className={(
                styles.content,
                departmentId === departmentId && styles.active
              )}
              >
                {/* 常见症状内容区域 */}
                <div className={styles.zheng}>
                  {
                    symptoms.map((item) => {
                      return <span key={item.id} onClick={()=>navigate(`/symptomsDetail/${item.id}?title=${item.name}`)}>{item.name}</span>
                    })
                  }
                </div>

              </div>

            </div>
          </div>

        </Tabs.Tab>
        <Tabs.Tab title='常用药品' key='vegetables'>
          {/* 常用药品内容区域 */}
          <div className={styles.container}>
            <div className={styles.side}>
              {/* 常用药品侧边栏 */}
              <SideBar activeKey={drugsCategoryId} onChange={setDrugsCategoryId}>
                {medicine.map((item) => (
                  <SideBar.Item key={item.id} title={item.name} />
                ))}
              </SideBar>
            </div>
            <div className={styles.main}>
              <div className={(
                styles.content,
                drugsCategoryId === drugsCategoryId && styles.active
              )}
              >
                {/* 常用药品内容区域 */}
                <div className={styles.zheng}>
                  {
                    medicineCategory.map((item) => {
                      return <div className={styles.yao}  key={item.id} onClick={()=>navigate(`/medicineDetail/${item.id}?title=${item.name}`)}>
                        <img style={{width:'100px',height:'100px'}} src={item.picture} alt="" />
                        <span>{item.name}</span>
                      </div> 
                    })
                  }
                </div>

              </div>

            </div>
          </div>
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default Index
